{% extends 'base.html' %}
{% load static %}
{% load  sizeformat %}

{% block head %}
{#    <link rel="stylesheet" type="text/css" href="{% static 'vms/vms_list.css' %}">#}
    <style>
    .mouse-hover:hover .mouse-hover-show {
        display: inline-block;
    }
    .mouse-hover-show {
        display: none;
    }
    .line-limit-length {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
{% endblock %}
{% block title %}云主机详情{% endblock %}

{% block boby %}
    <div class="container-fluid col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>云主机详情</strong></span>
                <div class="float-right">
                    <a class="btn btn-sm btn-success" href="{% url 'vms:vm-create' %}">创建云主机</a>
                    <a class="btn btn-sm btn-info" id="id-vm-list-url" href="{% url 'vms:vms-list' %}">云主机列表</a>
                </div>
            </div>
            <div class="card-body">
                <div class="text-center h3">
                    <span id="id-vm-uuid">{{ vm.hex_uuid }}</span>
                    {% include 'vm_operations.html' %}
                    <span class="h5" id="vm_task_{{ vm.hex_uuid }}"></span>
                </div>
                <div>
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info">
                            <div class="row">
                                <div class="col-2"></div>
                                <div class="col-10">
                                    <div class="row">
                                        <div class="col-4">
                                            <strong>运行状态：</strong><span id="vm_status_{{ vm.hex_uuid }}"></span>
                                            <button class="btn btn-sm btn-outline-success btn-update-vm-status"><i class="fa fa-sync"></i></button>
                                        </div>
                                        <div class="col-4"><strong>创建者：</strong>{{vm.user}}</div>
                                        <div class="col-4"><strong>创建时间：</strong>{{vm.create_time|date:'Y-m-d H:i:s'}}</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-success">
                            <div class="row">
                                <div class="col-md-2"><strong>位置信息</strong></div>
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-4"><strong>所属分中心：</strong>{{ vm.host.group.center.name }}</div>
                                        <div class="col-md-4"><strong>所属集群：</strong>{{ vm.host.group.name }}</div>
                                        <div class="col-md-4"><strong>宿主机IP：</strong>{{ vm.host.ipv4 }}</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-warning">
                            <div class="row row_style">
                                <div class="col-md-2"><strong>配置信息</strong></div>
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-4"><strong>CPU：</strong>{{ vm.vcpu }}</div>
                                        <div class="col-md-4"><strong>MEMORY：</strong>{{ vm.mem|sizeformat:'MB' }}</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-danger">
                            <div class="row">
                                <div class="col-md-2"><strong>镜像信息</strong></div>
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-4"><strong>系统镜像</strong>：{{ vm.image }}</div>
                                        <div class="col-md-4"><strong>CEPH集群</strong>：{{ vm.image.ceph_pool.ceph.name }}</div>
                                        <div class="col-md-4"><strong>Pool Name</strong>：{{ vm.image.ceph_pool.pool_name }}</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-info">
                            <div class="row">
                                <div class="col-md-2"><strong>网络信息</strong></div>
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-4"><strong>IP：</strong>{{vm.ipv4}}</div>
                                        <div class="col-md-4"><strong>MAC：</strong>{{ vm.mac_ip.mac }}</div>
                                        <div class="col-md-4"><strong>子网：</strong>{{ vm.mac_ip.vlan }}</div>
                                        <div class="col-md-4"><strong>网桥br：</strong>{{ vm.mac_ip.vlan.br }}</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item list-group-item-success">
                            <div class="row">
                                <div class="col-md-2"><strong>备注信息</strong></div>
                                <div class="col-md-10 mouse-hover">
                                    <div>
                                        <span>{{ vm.remarks|default_if_none:'无' }}</span>
                                        <span class="mouse-hover-show edit_vm_remark" vm_uuid="{{ vm.hex_uuid }}" title="修改备注">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                    </div>
                                    <div id="remarks_edit" style="display:none">
                                        <textarea id="remarks">{{ vm.remarks|default_if_none:'' }}</textarea>
                                        <span class="save_vm_remark" title="保存备注" vm_uuid="{{ vm.hex_uuid }}">
                                            <i class="fa fa-save"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p><strong>云硬盘</strong></p>
                        {% with vm.vdisks as vdisks %}
                            {% if vdisks %}
                                <table class="table table-default text-center table-disk-list"
                                       style="word-wrap:break-word;word-break:break-all;">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>设备</th>
                                        <th>UUID</th>
                                        <th>机组</th>
                                        <th>存储池</th>
                                        <th>容量</th>
                                        <th>用户</th>
                                        <th>创建时间</th>
                                        <th>状态</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for disk in vdisks %}
                                        <tr id="tr_{{ disk.uuid }}">
                                            <td>{{ disk.dev }}</td>
                                            <td class="line-limit-length" style="max-width: 150px;" title="{{ disk.uuid }}"><b>{{ disk.uuid }}</b></td>
                                            <td>{{ disk.quota.group }}</td>
                                            <td>{{ disk.quota }}</td>
                                            <td>{{ disk.size|sizeformat:'GB' }}</td>
                                            <td>{{ disk.user }}</td>
                                            <td>{{ disk.create_time | date:'Y-m-d H:i:s' }}</td>
                                            <td>
                                                {% if disk.enable %}
                                                    <i class="fa fa-check"></i>
                                                {% else %}
                                                    <i class="fa fa-times"></i>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <span>{{ disk.remarks|default_if_none:'' }}</span>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger btn-disk-umount"
                                                        data-disk-uuid="{{ disk.uuid }}">卸载
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                未挂载云硬盘
                            {% endif %}
                        {% endwith %}
                        </li>
                        <li class="list-group-item">
                        <p><strong>PCI设备</strong></p>
                        {% with vm.pci_devices as devices  %}
                            {% if devices %}
                                <table class="table table-default text-center table-pci-list" style="word-wrap:break-word;word-break:break-all;">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>类型</th>
                                        <th>地址</th>
                                        <th>宿主机</th>
                                        <th>机组</th>
                                        <th>状态</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for dev in devices %}
                                        <tr id="tr_{{ dev.id }}">
                                            <td><b>{{ dev.id }}</b></td>
                                            <td>{{ dev.type_display }}</td>
                                            <td>{{ dev.address }}</td>
                                            <td>{{ dev.host.ipv4 }}</td>
                                            <td>{{ dev.host.group }}</td>
                                            <td>
                                                {% if dev.enable %}
                                                    <i class="fa fa-check"></i>
                                                {% else %}
                                                    <i class="fa fa-times"></i>
                                                {% endif %}
                                            </td>
                                            <td><span>{{ dev.remarks|default_if_none:'' }}</span></td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger btn-pci-unmount"
                                                        data-pci-id="{{ dev.id }}">卸载
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                未挂载PCI设备
                            {% endif %}
                        {% endwith %}
                        </li>
                        <li class="list-group-item" id="id-vm-snap-content">
                            <p><strong>云主机快照</strong></p>
                            {% if vm.sys_snaps %}
                                <table class="table table-default text-center table-vm-snap-list"
                                       style="word-wrap:break-word;word-break:break-all;">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>快照</th>
                                        <th>创建时间</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for snap in vm.sys_snaps %}
                                        <tr id="tr_snap_{{ snap.id }}">
                                            <td>{{ snap.id }}</td>
                                            <td class="line-limit-length" style="max-width: 150px;" title="{{ snap.snap }}">{{ snap.snap }}</td>
                                            <td>{{ snap.create_time |date:'Y-m-d H:i:s' }}</td>
                                            <td class="mouse-hover">
                                                <div>
                                                    <span>{{ snap.remarks|default_if_none:'' }}</span>
                                                    <span class="mouse-hover-show edit-vm-snap-remark" title="修改备注">
                                                        <i class="fa fa-edit"></i>
                                                    </span>
                                                </div>
                                                <div style="display:none">
                                                    <textarea id="remarks">{{ snap.remarks|default_if_none:'' }}</textarea>
                                                    <span class="save-vm-snap-remark" title="保存备注" data-snap-id="{{ snap.id }}">
                                                        <i class="fa fa-save"></i>
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger btn-vm-snap-delete"
                                                        data-snap-id="{{ snap.id }}">删除
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger btn-vm-snap-rollback"
                                                        data-snap-id="{{ snap.id }}">回滚
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                未创建快照
                            {% endif %}
                        </li>
                        <li class="list-group-item" id="id-vm-snap-content">
                            <p><strong>云主机状态</strong></p>
                            <div class="row">
                                <div class="col-6">
                                    <canvas id="chart-vm-cpu"></canvas>
                                </div>
                                <div class="col-6">
                                    <canvas id="chart-vm-mem"></canvas>
                                </div>
                                <div class="col-6">
                                    <canvas id="chart-vm-disk"></canvas>
                                </div>
                                <div class="col-6">
                                    <canvas id="chart-vm-network"></canvas>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'chartjs/chart-3.4.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'art-template/template-web.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_operations.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_detail.js' %}"></script>
{% endblock %}

